<template>
    <div class="page">
        <!-- 装饰气泡 -->
        <div class="bubbles">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            
        </div>

        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack">
            <img src="@/assets/images/mine/back.png" alt="返回图标" class="return-image" />
        </div>

        <div class="header">
            <p class="welcome">修改密码</p>
            <p class="sub-welcome">为您的账号提供更好的保护</p>
        </div>

        <img src="@/assets/images/loginCat.png" class="cat-image" alt="猫咪图片">

        <div class="modify-container">
            <div class="modify-content">
                <!-- 原密码 -->
                <div class="input-group">
                    <p class="label">原密码</p>
                    <div class="input-wrapper">
                        <input type="password" v-model="passwordInfo.oldPwd" placeholder="请输入原密码" />
                    </div>
                </div>
                <!-- 新密码 -->
                <div class="input-group">
                    <p class="label">新密码</p>
                    <div class="input-wrapper">
                        <input type="password" v-model="passwordInfo.newPwd" placeholder="请输入新密码" />
                    </div>
                </div>
                <!-- 确认密码 -->
                <div class="input-group">
                    <p class="label">确认密码</p>
                    <div class="input-wrapper">
                        <input type="password" v-model="passwordInfo.rePwd" placeholder="请再次输入新密码" />
                    </div>
                </div>

                <!-- 确认修改按钮 -->
                <div class="button-group">
                    <div class="confirm-btn" @click="handleModify">
                        <span>确认修改</span>
                    </div>
                    <div class="cancel-btn" @click="goBack">
                        <span>取消</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { modifyPassword } from "../api/index";  // 需要创建这个API

const router = useRouter();

const goBack = () => {
    router.back();
};

const passwordInfo = reactive({
    oldPwd: '',
    newPwd: '',
    rePwd: ''
})

const handleModify = async () => {
    // 密码正则：必须包含大小写字母和数字，长度8-16位
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;

    if (passwordInfo.oldPwd === '') {
        showToast('请输入原密码');
    } else if (passwordInfo.newPwd === '') {
        showToast('请输入新密码');
    } else if (!passwordRegex.test(passwordInfo.newPwd)) {
        showToast('新密码必须包含大小写字母和数字，长度在8到16个字符之间');
    } else if (passwordInfo.rePwd === '') {
        showToast('请确认新密码');
    } else if (passwordInfo.newPwd !== passwordInfo.rePwd) {
        showToast('两次输入的密码不一致');
    } else {
        try {
            const res = await modifyPassword(passwordInfo);
            if (res.data.code === 200) {
                showToast('修改成功');
                localStorage.removeItem('token');
                router.replace('/login');
            } else {
                showToast(res.data.message || '修改失败');
            }
        } catch (error) {
            console.error('修改密码错误:', error);
            if (error.response?.status === 401) {
                showToast('登录已过期，请重新登录');
                router.replace('/login');
            } else {
                showToast('修改密码失败');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    position: relative;
    overflow: hidden;
}

.back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 1000;
    
    .return-image {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
    }
}

// 气泡装饰
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 50%;

    &:nth-child(1) {
        width: 60px;
        height: 60px;
        top: 20%;
        left: 10%;
        animation: float 6s ease-in-out infinite;
    }

    &:nth-child(2) {
        width: 40px;
        height: 40px;
        top: 15%;
        right: 20%;
        animation: float 8s ease-in-out infinite;
    }

   

    &:nth-child(4) {
        width: 50px;
        height: 50px;
        top: 25%;
        right: 35%;
        animation: float 5s ease-in-out infinite;
    }

    &:nth-child(5) {
        width: 35px;
        height: 35px;
        top: 40%;
        right: 15%;
        animation: float 9s ease-in-out infinite;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

.header {
    padding: 40px 30px;
    color: #fff;
    position: relative;
    z-index: 2;

    .welcome {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 8px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(5px);
        padding: 15px 25px;
        border-radius: 20px;
        display: inline-block;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            left: 20px;
            bottom: -8px;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(5px);
            transform: rotate(45deg);
            z-index: -1;
        }
    }

    .sub-welcome {
        position: absolute;
        top: 59%;
        font-size: 16px;
        opacity: 0.8;
        margin-left: 25px;
        margin-top: 15px;
    }
}

.cat-image {
    position: absolute;
    right: -20px;
    top: 160px;
    width: 200px;
    height: auto;
    transform: rotate(5deg);
    z-index: 2;
}

.modify-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 65vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 30px 30px 0 0;
    padding: 30px;
}

.modify-content {
    max-width: 340px;
    margin: 0 auto;
    padding-top: 20px;

    .input-group {
        margin-bottom: 20px;
        
        .label {
            font-size: 16px;
            font-weight: 500;
            color: #555;
            margin-bottom: 8px;
        }

        .input-wrapper {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(99, 102, 241, 0.2);
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

            &:focus-within {
                border-color: #8B5CF6;
                box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
                transform: translateY(-2px);
            }

            input {
                width: 100%;
                height: 52px;
                border: none;
                background: transparent;
                padding: 0 20px;
                font-size: 15px;
                color: #333;
                outline: none;

                &::placeholder {
                    color: #999;
                }
            }
        }
    }

    .button-group {
        margin-top: 40px;

        .confirm-btn,
        .cancel-btn {
            width: 100%;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;

            span {
                font-size: 16px;
            }

            &:active {
                transform: scale(0.98);
            }
        }

        .confirm-btn {
            background: linear-gradient(135deg, #8B5CF6, #6366F1);
            color: white;
            margin-bottom: 15px;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);

            &:hover {
                box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
            }
        }

        .cancel-btn {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(139, 92, 246, 0.3);
            color: #6366F1;

            &:hover {
                background: rgba(255, 255, 255, 0.95);
                border-color: #8B5CF6;
            }
        }
    }
}
</style>